<template>
  <div>
    <div class="bottonMargin">
      <el-button @click="getInfo">查询</el-button>
      <el-button @click="ascertain">确定</el-button>
    </div>
    <vxe-table border align="center" :data="tableData" ref="xTable">
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="shipmentName"
          title="入驻商"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.shipmentName"
            placeholder="入驻商"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="goodCode"
          title="商品编码"
          min-width="120"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.goodCode"
            placeholder="商品编码"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="goodsName"
          title="商品名称"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.goodsName"
            placeholder="商品名称"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="goodsBarCode"
          title="商品条码"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.goodsBarCode"
            placeholder="商品条码"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="unitName"
          title="单位"
          min-width="100"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.unitName" placeholder="单位" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="goodsTotalNum"
          title="总数量"
          min-width="280"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.goodsTotalNumStart"
            placeholder="下限"
            clearable
            type="number"
            style="width: 45%"
          />
          -
          <el-input
            v-model="listQuery.goodsTotalNumEnd"
            placeholder="上限"
            clearable
            type="number"
            style="width: 45%"
          />
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :page-sizes="[20, 30, 50, 100]"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import { waveQueryGoods } from "@/api/outStorage";

export default {
  data() {
    return {
      tableData: [],
      listQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      waveQueryGoods(this.listQuery).then((res) => {
        this.tableData = res.data.records;
        this.listQuery.total = res.data.total;
      });
    },
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage;
      this.listQuery.pageSize = pageSize;
      this.getInfo();
    },
    ascertain() {
      let selectRecords = this.$refs.xTable.getCheckboxRecords();
      let arr = [];
      selectRecords.forEach((i) => {
        if (i.goodCode) {
          arr.push(i.goodCode);
        }
      });
      this.$emit("goods", arr.join(","));
    },
  },
};
</script>

<style scoped>
.bottonMargin {
  margin-bottom: 12px;
}
</style>